//基于设计稿是iphone6 开发 宽度750px

//以下是苏宁移动端所涉及到的尺寸范围

//我们关心的尺寸有320px 360px 375px 384px 400px 414px 424px 480px 540px 720px 750px

//因为我们pc端也可以打开页面，所以我们默认html字体大小为50px

//假定现在设计稿的宽度为750px  我们将页面划分为 15等分

//我们类比一下em的计算方式
/*
谷歌浏览器默认字体大小 16px，测试如下

<body>
  <div></div>
</body>

div{
  width: 2em;
  height: 2rem;
  border: 1px solid;
  box-sizing: border-box;
}

div的最终宽度等于32px 
于是我们得到下面的计算结果

div的宽度 = 父盒子的字体大小 * 2em 
既
32px = 12px * 2em
*/

//为了统一计算规则，rem的单位计算方式是相对于html的文字大小而言的
// 大致可以推倒出计算公式如下类比
// div的宽度 = html的字体大小 * nrem
// 假设html的字体大小是50px那么最终盒子的宽度大小将如下面结果
// 100px =  50px * 2rem

// 好的，rem的计算方式我们现在已经描述的很清晰了，下面我们再来结合设计稿
//根据不同尺寸的像素，给html计算出一个合理的字体大小，假设我们将750px的屏幕分成15等分那么一等分的宽度为50px，我们把html的字体同时也设置成50px
// 然后就会有下面的计算公式

// 750px = 50px * 10rem    刚好等于设计稿的宽度

// 这样我们就可以把不同的屏幕划分成相同的份数，计算出对应的html的字体大小这样就可以做到不同屏幕下面的尺寸的额适配了
html {
  font-size: 50px;
}

$baseCell:15;

@media screen and(min-width:320px) {
  html {
    font-size: 320px/$baseCell;
  }
}

@media screen and(min-width:360px) {
  html {
    font-size: 360px/$baseCell;
  }
}

@media screen and(min-width:375px) {
  html {
    font-size: 375px/$baseCell;
  }
}

@media screen and(min-width:384px) {
  html {
    font-size: 384px/$baseCell;
  }
}

@media screen and(min-width:400px) {
  html {
    font-size: 400px/$baseCell;
  }
}

@media screen and(min-width:414px) {
  html {
    font-size: 414px/$baseCell;
  }
}

@media screen and(min-width:424px) {
  html {
    font-size: 424px/$baseCell;
  }
}

@media screen and(min-width:480px) {
  html {
    font-size: 480px/$baseCell;
  }
}

@media screen and(min-width:540px) {
  html {
    font-size: 540px/$baseCell;
  }
}

@media screen and(min-width:720px) {
  html {
    font-size: 720px/$baseCell;
  }
}

@media screen and(min-width:750px) {
  html {
    font-size: 750px/$baseCell;
  }
}


//终于码完了，这些尺寸都是从苏宁站里面找见的

//下面我们开始实战了

body {
  width: 15rem;
  margin: 0 auto;
  background-color: #f7f7f7;
}

nav {
  background: #ffdb47;
  height: 1.76rem;
}